<template>
  <a-card :bordered="false">
    <a-col :md="4">
      <a-select style="width: 100%" v-model="keys" @change="handleChangeFuKF" placeholder="请选择库房">
        <a-select-option v-for="item in kuData" :key="item.id" :value="item.id">{{item.mingCheng}}</a-select-option>
      </a-select>
      <div class="antAdd">
        <span @click="handleReset">+</span>
        <span @click="handleDe">-</span>
      </div>
      <a-tree show-line @select="onSelect" class="tree" :selectedKeys="selectedKeys">
        <a-icon slot="icon" type="carry-out" />
        <a-tree-node v-for="item in treeData" :key="item.id">
          <a-icon slot="icon" type="carry-out" />
          <span slot="title">{{item.mingCheng}}</span>
          <a-tree-node v-for="items in item.childList" :key="items.id">
            <a-icon slot="icon" type="carry-out" />
            <span slot="title">{{items.mingCheng}}</span>
            <a-tree-node v-for="itemss in items.childList" :key="itemss.id">
              <a-icon slot="icon" type="carry-out" />
              <span slot="title">{{itemss.mingCheng}}</span>
            </a-tree-node>
          </a-tree-node>
        </a-tree-node>
      </a-tree>
    </a-col>
    <a-col :md="20">
      <a-row :gutter="24">
        <a-form :form="form" @submit="handleSubmit">
          <a-col :md="12">
            <a-form-item v-bind="formItemLayout" label="名称">
              <a-input
                placeholder="请输入名称"
                v-decorator="['mingCheng',{
            rules: [
              {
                required: true,
                message: '排名称不能为空',
              },
            ],
          },
        ]"
              />
            </a-form-item>
          </a-col>
          <a-col :md="12">
            <a-form-item v-bind="formItemLayout" label="所属库房">
              <a-select
                disabled
                placeholder="请选择所属库房"
                v-decorator="['kuFangHangBiaoShi',{
                  rules: [
                    {
                      required: true,
                      message: '所属库房不能为空',
                    },
                  ],
                }]"
              >
                <a-select-option
                  v-for="item in kuData"
                  :key="item.id"
                  :value="item.id"
                >{{item.mingCheng}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="12">
            <a-form-item v-bind="formItemLayout" label="父级标识">
              <a-tree-select
                :disabled="isF"
                v-decorator="['fuJieDianBiaoShi']"
                show-search
                style="width: 100%"
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                placeholder="请选择父级标识"
                allow-clear
                tree-default-expand-all
                @change="onChangeTree"
              >
                <a-tree-select-node
                  v-for="item in treeData"
                  :key="item.id"
                  :value="item.id"
                  :title="item.mingCheng"
                >
                  <a-tree-select-node
                    v-for="items in item.childList"
                    :key="items.id"
                    :value="items.id"
                    :title="items.mingCheng"
                  >
                    <a-tree-select-node
                      v-for="itemss in items.childList"
                      :key="itemss.id"
                      :value="itemss.id"
                      :title="itemss.mingCheng"
                    />
                  </a-tree-select-node>
                </a-tree-select-node>
              </a-tree-select>
            </a-form-item>
          </a-col>
          <a-col :md="12">
            <a-form-item v-bind="formItemLayout" label="创建人">
              <j-select-multi-user
                style="width: 100%"
                v-decorator="['zeRenRenMingCheng',{
                  rules: [
                    {
                      required: true,
                      message: '创建人不能为空',
                    },
                  ],
                }]"
              ></j-select-multi-user>
            </a-form-item>
          </a-col>
          <a-col :md="12">
            <a-form-item v-bind="formItemLayout" label="创建时间">
              <j-date
                :disabled="true"
                placeholder="请选择创建时间"
                v-decorator="['createTime',{
                  rules: [
                    {
                      required: true,
                      message: '创建时间不能为空',
                    },
                  ],
                }]"
                :trigger-change="true"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
          <a-col :md="12">
            <a-form-item v-bind="formItemLayout" label="次序">
              <a-input-number
                style="width: 100%"
                id="inputNumber"
                placeholder="请输入次序"
                v-decorator="['ciXu',{
                  rules: [
                    {
                      required: true,
                      message: '次序不能为空',
                    },
                  ],
                }]"
                :min="1"
              />
            </a-form-item>
          </a-col>
          <a-col :md="24">
            <a-form-item v-bind="formItemLayout2" label="说明">
              <a-textarea placeholder="请输入说明" :rows="4" v-decorator="['beiZhu']" />
            </a-form-item>
          </a-col>
          <a-col :md="24">
            <div class="antBtn">
              <a-button type="primary" html-type="submit" v-if="selectedKeys.length>0">保存</a-button>
            </div>
          </a-col>
        </a-form>
      </a-row>
    </a-col>
  </a-card>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
import moment from 'moment'
import JDictSelectTag from '@/components/dict/JDictSelectTag'
import JDate from '@/components/jeecg/JDate'
import JSelectMultiUser from '@/components/jeecgbiz/JSelectMultiUser'
export default {
  name: 'KuFangList',
  components: {
    JDate,
    JSelectMultiUser,
  },
  data() {
    return {
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
      },
      formItemLayout2: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 3 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 },
        },
      },
      treeData: [],
      kuData: [],
      selectedKeys: [],
      id: '',
      keys: '',
      form: this.$form.createForm(this, { name: 'register' }),
      isF: false,
      fj: [],
    }
  },
  created() {
    this.mlName()
  },
  methods: {
    // 库房
    mlName() {
      getAction('/kfKuFang/findKuFang', {}).then((res) => {
        if (res.code == 200) {
          let data = res.result
          this.kuData = data
          this.keys = data[0].id
          this.mlTree(this.keys)
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 树
    mlTree(id) {
      getAction(`/kfDangAnGui/tree?kuFangId=${id}`, {}).then((res) => {
        if (res.code == 200) {
          this.treeData = res.result
        } else {
          this.$message.error(res.message)
        }
      })
    },
    //  树操作
    onSelect(selectedKeys, info) {
      this.selectedKeys = selectedKeys
      // 点击树获取详情
      if (selectedKeys.length > 0) {
        getAction(`/kfDangAnGui/queryById?id=${selectedKeys}`, {}).then((res) => {
          if (res.code == 200) {
            const {
              form: { setFieldsValue },
            } = this
            const data = res.result
            if (data.fuJieDianBiaoShi == '0' || data.fuJieDianBiaoShi == '' || data.fuJieDianBiaoShi == null) {
              this.isF = true
            }
            this.id = data.id
            this.$nextTick(() => {
              setFieldsValue({
                mingCheng: data.mingCheng,
                kuFangHangBiaoShi: data.kuFangHangBiaoShi,
                ciXu: data.ciXu,
                zeRenRenMingCheng: data.zeRenRenMingCheng,
                createTime: data.createTime,
                beiZhu: data.beiZhu,
                fuJieDianBiaoShi: data.fuJieDianBiaoShi,
              })
            })
          }
        })
      } else {
        this.form.resetFields()
        this.id = ''
        this.isF = false
        this.selectedKeys = []
      }
    },
    // 父级选择
    onChangeTree(value) {
      console.log(value, '门类树')
    },
    // 提交
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          values.id = this.id
          let body = values
          postAction('/kfDangAnGui/add', { ...body }).then((res) => {
            if (res.code == 200) {
              this.$message.success(res.message)
              this.isF = false
              this.mlTree(this.keys)
            }
          })
        }
      })
    },
    // 新增
    handleReset() {
      this.$router.push({ path: '/kufang-add', query: { keys: this.keys, fj: this.selectedKeys } })
    },
    // 删除
    handleDe() {
      getAction(`/kfDangAnGui/delete?id=${this.id}`, {}).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.message)
          this.form.resetFields()
          this.id = ''
          this.isF = false
          this.selectedKeys = []
          this.mlTree(this.keys)
        }
      })
    },
    // 库房选择-父级
    handleChangeFuKF(value) {
      this.keys = value
      this.form.resetFields()
      this.id = ''
      this.isF = false
      this.selectedKeys = []
      this.mlTree(this.keys)
    },
  },
}
</script>

<style lang="less">
.antBtn {
  text-align: right;
}
.antAdd {
  font-size: 24px;
  cursor: pointer;
}
.antAdd span:nth-child(2) {
  margin-left: 30px;
}
</style>